// 含有树状表格的封装
// 作者：wang
// 时间：2019-7-16
<template>
  <div class="mf-table-body ly_flex ly_flex_col">
    <el-table
      ref="table"
      height='calc(100vh - 180px)'
      :row-key="payhKeys"
      :data="dataSource"
      style="width: 100%;flex:none;overflow-y:auto;"
      @selection-change="handleSelectionChange">
      <!--选择-->
      <el-table-column v-if="hasSelection" type="selection" width="55"></el-table-column>
      <!--序号-->
      <el-table-column v-if="hasIndex" type="index" width="55"></el-table-column>
      <!-- 折叠面板的图标 -->
      <el-table-column v-if="hasExpand" width="150">
        <template slot-scope="scope">
          <span
            class="tree-ctrl"
            @click.stop="toogleExpand(scope.row)"
          >
            <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
            <i v-else class="el-icon-minus"></i>
          </span>
        </template>
      </el-table-column>
      <!-- 折叠面板的数据 -->
      <el-table-column width="1" v-if="hasExpand" type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.children" style="width: 100%" :header-cell-style="{
          }">
           <el-table-column width="150"></el-table-column>
            <el-table-column v-for="( column, index) in columns"
                      v-if="column.isShow"
                      header-align="left"
                      :sortable="column.hasSort"
                      :key="column.prop"
                      :prop="column.prop"
                      :label="column.label">
            </el-table-column>
            <!--操作-->
           <slot name="childColumn"></slot>
          </el-table>
        </template>
      </el-table-column>
      <!--数据源-->
      <el-table-column v-for="(column, index) in columns"
                      v-if="column.isShow"
                      header-align="left"
                      :sortable="column.hasSort"
                      :key="column.prop"
                      :prop="column.prop"
                      :label="column.label">
      </el-table-column>
      <!--操作-->
      <slot name="handleColumn"></slot>
    </el-table>
    <slot name="pagination"></slot>
  </div>
</template>

<script>
  export default {
    name: "Table",
    props:{
      //是否可以选择
      hasSelection:{
        type:Boolean,
        default:function () {
          return false
        }
      },
      //是否有序列项
      hasIndex:{
        type:Boolean,
        default:function () {
          return false
        }
      },
      //是否折叠面板
      hasExpand:{
        type:Boolean,
        default:function () {
          return false
        }
      },
      // 这是相应的字段展示
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 这是数据源
      dataSource: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
    data() {
      return {
        payhKeys(row) {
          return row.id
        },
      }
    },
    methods: {
      //将选中的行发送到父组件
      handleSelectionChange(val) {
        const selectionArr = [];
        val.forEach(function (el) {
          selectionArr.push(el);
        });
        this.$emit('commitSelection', selectionArr);
      },
      toogleExpand(row) {
        let $table = this.$refs.table;
        this.dataSource.map((item) => {
          if (row.id != item.id) {
            item._expanded = false
            $table.toggleRowExpansion(item, false)
          }
        })
        row._expanded = !row._expanded
        $table.toggleRowExpansion(row)
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-table__expand-icon {
  color: transparent;
}
// .mf-table-body {
//   height: 100%;
//   overflow: hidden;
// }
// /deep/.el-table {
//   height: 100%;
//   overflow: auto;
// }
/deep/.el-table__expanded-cell[class*=cell] {
    padding: 0;
    border-bottom: 0;
    /deep/.el-table__header-wrapper {
      display: none;
    }
}

</style>
